<template>
  <dl>
    <template v-if="reportData.length>0">
      <dd v-for="(item, index) in reportData" :key="index">
        <h5>
          <i class="circle"></i><span>{{item.title}}</span>
          <p class="more" @click="toMorePage(item)">查看全部&nbsp;></p>
        </h5>
        <template v-if="item.content.length>0">
          <div class="content">
            <div class="logo">
              <img :src="item.logo" alt="">
            </div>
            <div class="info-box">
              <ul class="left">
                <li v-for="(citem, index2) in item.content.filter((v, i) => i < 5)" :key="index2" @click="toPage(citem)">
                  <span class="date">{{citem.pubdate}}</span>
                  <i class="icon iconfont icon-zixun3"></i>
                  <p class="tit">{{citem.issue}}</p>
                </li>
              </ul>
              <ul class="right">
                <li v-for="(citem, index2) in item.content.filter((v, i) => i >= 5)" :key="index2" @click="toPage(citem)">
                  <span class="date">{{citem.pubdate}}</span>
                  <i class="icon iconfont icon-zixun3"></i>
                  <p class="tit">{{citem.issue}}</p>
                </li>
              </ul>
            </div>
          </div>
        </template>
        <!-- no-data -->
        <div v-else class="no-data">
          <loading1 :emptyText="cemptyText"/>
        </div>
      </dd>
    </template>
    <template v-else>
      <div class="no-data">
        <loading1 :emptyText="emptyText"/>
      </div>
    </template>
  </dl>
</template>

<script>
export default {
  data() {
    return {
      ipi: 1,
      ips: 10,
      reportData: [],
      prevRouteSource: '',
      emptyText: 'loading',
      cemptyText: 'loading'
    }
  },
  methods: {
    init(data) {
      this.getReportData(data)
    },
    getReportData(data) {
      this.reportData = []
      this.emptyText = 'loading'
      let ths = this
      let reportData = []
      data.forEach(v => {
        if (v.source.length > 0) {
          reportData.push({
            title: v.source[0] && v.source[0].key,
            issue: v.source[0] && v.source[0].doc_count,
            logo: '',
            content: v.result || []
          })
        }
      })
      this.reportData = reportData
      this.reportData.forEach(v => {
        let imageUrlArr = v.content.filter(v => v.image_url)
        if (imageUrlArr.length > 0) {
          this.getImageUrl(imageUrlArr[0].image_url, d => {
            ths.$set(v, 'logo', d)
          })
        } else {
          ths.$set(v, 'logo', require('@/assets/img/report/u3712.png'))
        }
      })
      if (reportData.length <= 0) {
        this.emptyText = '暂无'
      }
    },
    // 封面
    getImageUrl(image_url, func) {
      if (image_url.indexOf('.') > -1) {
        this.$axios({
          method: 'get',
          url: this.$Url.report.download2,
          params: {
            filename: image_url,
            bucketName: 'gdt-bucket'
          },
          responseType: 'blob'
        }).then(res => {
          let blob = new Blob([res.data]);
          let url = window.URL.createObjectURL(blob);
          func && func(url)
        }).catch(err => {
          func && func(require('@/assets/img/report/u3712.png'))
        })
      } else {
        func && func(require('@/assets/img/report/u3712.png'))
      }
    },
    toMorePage(item) {
      let id = this.$route.params.id
      let param = JSON.parse(decodeURIComponent((id)))
      let obj = {
        page: 'item',
        source: item.title,
        // year: param.year // 这样传导致左侧展示有问题，所以先注掉
        year: '全部'
      }
      this.$router.push({
        name: this.$route.name,
        params: {
          id: encodeURIComponent(JSON.stringify(obj))
        },
      })
    },
    toPage(citem) {
      let obj = {
        page: 'detail',
        esId: citem.esId,
        source: citem.source,
        year: moment(citem.pubdate).format('YYYY')
      }
      this.$router.push({
        name: this.$route.name,
        params: {
          id: encodeURIComponent(JSON.stringify(obj))
        }
      })
    }
  },
  watch: {
    '$route'() {
      if (this.$route.params && this.$route.params.id) {
        // this.init()
      }
    }
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
dl {
  position: relative;
  width: 100%;
  > .no-data {
    position: relative;
    width: 100%;
    padding: .1rem .26rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-align: center;
    background-color: $color2;
  }
  dd {
    position: relative;
    width: 100%;
    padding: 0 .26rem;
    border-radius: 8px;
    margin-bottom: .18rem;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-align: center;
    background-color: $color2;
    h5 {
      position: relative;
      width: 100%;
      padding: .14rem .09rem;
      border-bottom: 1px solid $color36;
      box-sizing: border-box;
      font-size: .16rem;
      font-weight: normal;
      text-align: left;
      color: $color47;
      .circle {
        position: relative;
        width: .16rem;
        height: .1rem;
        margin-right: .18rem;
        vertical-align: middle;
        &:before {
          position: absolute;
          top: 50%;
          left: -.04rem;
          z-index: 1;
          width: .1rem;
          height: .1rem;
          border-radius: 50%;
          margin-top: -.04rem;
          background-color: $color48;
          content: '';
        }
        &:after {
          position: absolute;
          top: 50%;
          right: 0;
          z-index: 1;
          width: .1rem;
          height: .1rem;
          border-radius: 50%;
          margin-top: -.04rem;
          background-color: $mainColor;
          content: '';
        }
      }
      span {
        vertical-align: middle;
      }
      .more {
        position: absolute;
        top: .18rem;
        right: .09rem;
        font-size: .14rem;
        color: $color116;
        cursor: pointer;
        &:hover {
          color: $color47;
        }
      }
    }
    .content {
      position: relative;
      display: flex;
      width: 100%;
      padding: .2rem 0;
      .logo {
        position: relative;
        width: 1.5rem;
        // height: 1.63rem;
        margin-left: .25rem;
        margin-right: .4rem;
        img {
          max-width: 100%;
          max-height: 100%;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
        }
      }
      .info-box {
        position: relative;
        display: flex;
        width: calc(100% - 2.25rem);
        padding: .01rem 10% 0;
        ul {
          position: relative;
          width: 48%;
          margin-left: 2%;
          li {
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: .2rem;
            .date {
              width: .96rem;
              min-width: 78px;
              border: 1px solid $color116;
              margin-right: .1rem;
              font-size: .14rem;
              text-align: center;
              color: $color116;
            }
            .icon {
              width: .3rem;
              font-size: .18rem;
            }
            .tit {
              width: calc(100% - .96rem - .2rem - .3rem);
              font-size: .15rem;
              cursor: pointer;
              text-align: left;
              text-decoration: underline;
              color: $color117;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
</style>